/**
 * 
 * Este componente gerência tabs
 * 
 * <b>Métodos: </b> 
 * <br><br>
 * 
 * <i><u>gerarTabs(seletor, config)</u></i>
 * <br>
 * Este método cria uma Tab. Recebe dois parâmetros. O parâmetro seletor é obrigatório.
 * @param seletor - Seletor da div Tab.
 * @param config - JSon com as opções para a criação da Tab. <br>
 * <i><ul>Opções config:<ul></i> <br>
 *     <li><b>active</b></li> Default: 0 <br> 
 *     			<u>Boolean:</u> Campos visíveis. Isto exige que o collapsible tenha a opção true; <br>
 *     			<u>Integer:</u>: O índice ficará ativo ao abrir a janela. Um valor negativo seleciona painéis que vão para trás a partir do último painel. 
 * 	   <br><br> 
 * 	   <li><b>collapsible</b></li> Default: false <br> 
 *     			<u>Boolean:</u> Quando definido como true , o painel ativo pode ser fechado. Dependendo da opção do <i>active</i> 
 * 	   <br><br> 
 * 	   <li><b>disabled</b></li> Default: false <br> 
 *     			<u>Boolean:</u> Quando definido como true , todas as guias ficam desativadas <br>
 *     			<u>Array:</u> Um vetor contendo os índices das guias que devem ser desativadas, por exemplo, [ 0, 2 ] iria desativar a primeira e a terceira abas. 
 *     <br><br> 
 * 	   <li><b>event</b></li> Default: click <br> 
 *     			<u>String:</u> O tipo de evento que as abas deve reagir, a fim de ativar o separador. Para ativar em foco, use "mouseover".
 *     <br><br> 
 * 	   <li><b>heightStyle</b></li> - Controla a altura do painel de cada guia. Default: content <br> 
 *     			<u>String - Valores possíveis:</u> <br>
 *     			<i>"auto"</i> - Todos os painéis irão ser definidos com a altura do painel mais alto. <br>
 *     			<i>"fill"</i> - Expande a altura disponível com base na altura dos pais dos guias. <br>
 *     			<i>"content"</i> - Cada painel terá a altura conforme seu conteúdo.
 *     <br><br> 
 * 	   <li><b>show</b></li> - Se e como animar a exibição do painel. Default: null <br> 
 *     			<u>Boolean:</u> Quando definido para false, nenhuma animação será usada e o painel será exibido imediatamente. Quando definido como true, o painel vai aparecer com a duração padrão ea flexibilização padrão.<br>
 *     			<u>Number:</u> O painel vai aparecer com a duração especificada e a flexibilização padrão. <br>
 *     			<u>String:</u> O painel será exibido usando o efeito especificado. O valor pode ser o nome de um embutido jQuery método animação, tal como "slideUp", ou o nome de um efeito jQuery UI, tais como "fold". Em qualquer dos casos, o efeito será usada com o padrão e a duração de flexibilização padrão. <br>
 *     			<u>Object:</u> Se o valor for um objeto, então effect, delay, duration, e easing podem ter propriedades fornecidas. Se o effect propriedade contém o nome de um método jQuery, em seguida, este método vai ser usado; de outro modo, assume-se que seja o nome de um efeito jQuery UI. Ao usar um efeito jQuery UI que suporta configurações adicionais, você pode incluir essas definições no objeto e eles serão passados ​​para o efeito. Se duration ou easing for omitido, em seguida, os valores padrão serão utilizados. Se effect é omitido, então "fadeOut" será usado. Se delay for omitido, então nenhum atraso é usado.
 *     <br><br> 
 * 	   <li><b>hide</b></li> - Se e como animar a ocultação do painel. Default: null <br> 
 *     			<u>Boolean:</u> Quando definido para false, nenhuma animação será usada e o painel ficará oculto imediatamente. Quando definido como true , o painel vai desaparecer com a duração padrão ea flexibilização padrão.<br>
 *     			<u>Number:</u> O painel vai desaparecer com a duração especificada e a flexibilização padrão. <br>
 *     			<u>String:</u> O painel será escondido usando o efeito especificado. O valor pode ser o nome de um embutido jQuery método animação, tal como "slideUp" , ou o nome de um efeito jQuery UI , tais como "fold" . Em qualquer dos casos, o efeito será usada com o padrão e a duração de flexibilização padrão. <br>
 *     			<u>Object:</u> Se o valor for um objeto, então effect, delay, duration, e easing podem ter propriedades fornecidas. Se o effect propriedade contém o nome de um método jQuery, em seguida, este método vai ser usado; de outro modo, assume-se que seja o nome de um efeito jQuery UI. Ao usar um efeito jQuery UI que suporta configurações adicionais, você pode incluir essas definições no objeto e eles serão passados ​​para o efeito. Se duration ou easing for omitido, em seguida, os valores padrão serão utilizados. Se effect é omitido, então "fadeOut" será usado. Se delay for omitido, então nenhum atraso é usado.
 *     <br><br> 
 *     
 * <b><u>Exemplo</u></b>
 * 
 * <i>
 *     	var json = {<br> 
 *			 active: false,<br> 
 *			 collapsible: true,<br> 
 * 			 hide: { effect: "blind", duration: 500 },<br> 
 *			 show: { effect: "blind", duration: 400 }<br> 
 *	};
 *		<br> 
 *	tab.<b>gerarTabs("#formulario #tabs", json)</b>;<br> 
 *  </i>   
 *  
 *  <br><br>    		 
 * <i><u>adicionarTabs(seletor, conteudo)</u></i>
 * <br>
 * Adiciona um painel informado pelo usuário. Recebe dois parâmetros, sendo todos obrigatórios.
 * @param seletor - Seletor da div Tab.
 * @param ids - JSon com os ids das tags do conteúdo do painél, ou seja, o id da tag li(aba) e o id da tag div (conteúdo).
 * 	<i><ul>Parâmetros ids<ul></i> <br>
 *     <li><b>idLiTab: </b></li> id da tag li (aba). 
 *     <li><b>Number: </b></li> id da tag div (conteúdo).
 *     
 *     <br><br>
 *     
 * <b><u>Exemplo</u></b><br>
 * 
 * 	<i>
 *     	var ids = { <br>
 *			 idLiTab: "liExemplo",<br>
 *			 idDiv: "exemplo"<br>
 *	};<br><br>
 *		
 *	tab.<b>adicionarTabs("#formulario #tabs", ids)</b>;
 *  </i>  
 *     
 *<br><br>
 *<i><u>removerTabs(seletor, ids)</u></i>
 *<br>
  * Remove um painél informado pelo usuário. Recebe dois parâmetros, sendo todos obrigatórios.
 * @param seletor - Seletor da div Tab.
 * @param ids - JSon com os ids das tags do conteúdo do painél, ou seja, o id da tag li(aba) e o id da tag div (conteúdo).
 * 	<i><ul>Parâmetros ids<ul></i> <br>
 *     <li><b>idLiTab: </b></li> id da tag li (aba). 
 *     <li><b>idDiv: </b></li> id da tag div (conteúdo).
 *     <br><br>
 *     
 * <b><u>Exemplo</u></b><br>
 * 
 * <i>
 *     	var ids = { <br>
 *			 idLiTab: "liExemplo",<br>
 *			 idDiv: "exemplo"<br>
 *	};<br><br>
 *		
 *	<i>
 *	tab.<b>adicionarTabs("#formulario #tabs", ids)</b>;
 *  </i>  
 *
 *<br><br>
 *<i><u>habilitarTabs(seletor, tabs)</u></i>
 *<br>
 * Habilita os painéis informados da tab. Recebe dois parâmetros, o seletor da div com os painéis que deseja desabilitar. Se não for informado um parâmetro tabs válido, toda a tab será desativada.
 * @param seletor - Seletor da div Tab.
 * @param tabs - Painéis que deseja desabilitar.
 * <i><ul>Opções tabs:<ul></i> <br>
 *     <li><b>String: </b></li> O href do painél que será desativado. 
 *     <li><b>Number: </b></li> O índice do painél que será desativado. 
 *     <li><b>Array: </b></li> Um vetor com os índices dos painéis que serão desativados 
 *     
 *     <br><br>
 *     
 * <b><u>Exemplos</u></b><br><br>
 *
 *	<i>
 *  tab.<b>habilitarTabs("#formulario #tabs", "#exemplo")</b>;<br>
 *	tab.<b>habilitarTabs("#formulario #tabs", 2)</b>;<br>
 *  tab.<b>habilitarTabs("#formulario #tabs", [0,1])</b>;<br>
 *  </i> 
 *  
 * <br><br>
 * <i><u>desabilitarTabs(seletor, tabs)</u></i>
 * <br>
 * Desabilita os painéis informados da tab. Recebe dois parâmetros, o seletor da div com os painéis que deseja desabilitar. Se não for informado um parâmetro tabs válido, toda a tab será desativada.
 * @param seletor - Seletor da div Tab.
 * @param tabs - Painéis que deseja desabilitar.
 * <i><ul>Opções tabs:<ul></i> <br>
 *     <li><b>String: </b></li> O href do painél que será desativado. 
 *     <li><b>Number: </b></li> O índice do painél que será desativado. 
 *     <li><b>Array: </b></li> Um vetor com os índices dos painéis que serão desativados 
 *     
 *     <br><br>
 *     
 * <b><u>Exemplos</u></b><br><br>
 * 
 *  <i>
 *  tab.<b>desabilitarTabs("#formulario #tabs", "#exemplo")</b>;<br>
 *	tab.<b>desabilitarTabs("#formulario #tabs", 2)</b>;<br>
 *  tab.<b>desabilitarTabs("#formulario #tabs", [0,1])</b>;<br>
 *  </i>  
 *     
 *<br><br>
 *<i><u>destruirTabs(seletor)</u></i>
 *<br> 
 * Destrói a Tab
 * @param seletor - Seletor da div Tab.
 * <br><br>
 * <b><u>Exemplo</u></b><br><br>
 *
 *<i> 
 *  tab.<b>destruirTabs("#formulario #tabs")</b>;<br>
 *</i>     
 * 
 * 
 *     
 */

function Tabs(){
	
}


/**
 * Adiciona um painel informado pelo usuário. Recebe dois parâmetros, sendo todos obrigatórios.
 * @param seletor - Seletor da div Tab.
 * @param conteudo - JSon com o id da div 
 * 	<i><ul>Parâmetros conteúdo<ul></i> <br>
 *     <li><b>idDiv: </b></li> id da tag div (conteúdo). 
 *     <li><b>contentsDiv: </b></li> conteúdo da tab.<br><br>
 *     <li><b>title: </b></li> título da tab 
 *     
 * <b><u>Exemplo</u></b>
 * <br><br>
 * <i>
 *     	var conteudo = {<br>
 *			 idDiv: "exemplo",<br>
 *			 contentsDiv: "<'h1'>Exemplo<'h1'><'p'>Inserindo conteúdo da tab<'/p'>",<br>
 *			 title: "Titulo"
 *	};<br>
 *	
 *		tab.<b>adicionarTabs("#formulario #tabs", conteudo)</b>;
 *  </i>   
 *     
 */
Tabs.prototype.adicionarTabs = function(seletor, conteudo){

	if(seletor != undefined && conteudo != undefined){
		
		$(seletor + " ul").append(
		        "<li id='li-" + conteudo.idDiv + "'><a href='#" + conteudo.idDiv + "'>" + conteudo.title + "</a></li>"
		    );
		    
		    $(seletor).append(
		        "<div id='" + conteudo.idDiv + "'>" + conteudo.contentsDiv + "</div>"
		    );
		    
		    $(seletor).tabs("refresh");
		
	}
	
};

/**
 * Remove um painél informado pelo usuário. Recebe dois parâmetros, sendo todos obrigatórios.
 * @param seletor - Seletor da div Tab.
 * @param ids - JSon com os ids das tags do conteúdo do painél, ou seja, o id da tag li(aba) e o id da tag div (conteúdo).
 * 	<i><ul>Parâmetros ids<ul></i> <br>
 *     <li><b>idLiTab: </b></li> id da tag li (aba). 
 *     <li><b>idDiv: </b></li> id da tag div (conteúdo).
 *     <br><br>
 *     
 * <b><u>Exemplo</u></b><br>
 * 
 * 	<i>
 *     	var ids = { <br>
 *			 idLiTab: "liExemplo",<br>
 *			 idDiv: "exemplo"<br>
 *	};<br><br>
 *		
 *	tab.<b>removerTabs("#formulario #tabs", ids)</b>;
 *  </i>   
 *     
 */
Tabs.prototype.removerTabs = function(seletor, ids){
		
	if(seletor != undefined && ids != undefined){
		
		$(seletor + " #"+ids.idLiTab).remove();
	    $(seletor + " #"+ids.idDiv).remove();
	    
	    $(seletor).tabs("refresh");
		
	}
	
};


/**
 * Habilita os painéis informados da tab. Recebe dois parâmetros, o seletor da div com os painéis que deseja habilitar. Se não for informado um parâmetro tabs válido, toda a tab será habilitada.
 * @param seletor - Seletor da div Tab.
 * @param tabs - Painéis que deseja habilitar.
 * <i><ul>Opções tabs:<ul></i> <br>
 *     <li><b>String: </b></li> O href do painél que será habilitado. 
 *     <li><b>Number: </b></li> O índice do painél que será habilitado. 
 *     <li><b>Array: </b></li> Um vetor com os índices dos painéis que serão habilitados 
 *     
 *     <br><br>
 *     
 * <b><u>Exemplos</u></b><br><br>
 *
 *	<i>
 *  tab.<b>habilitarTabs("#formulario #tabs", "#exemplo")</b>;<br>
 *	tab.<b>habilitarTabs("#formulario #tabs", 2)</b>;<br>
 *  tab.<b>habilitarTabs("#formulario #tabs", [0,1])</b>;<br>
 *  </i>  
 *     
 */
Tabs.prototype.habilitarTabs = function(seletor, tabs){
	
	if(tabs == 0 || tabs){
		
		if(typeof tabs == 'string' || typeof tabs == 'number'){
			
			$(seletor).tabs("enable", tabs);
			
		}
		
		if(typeof tabs == 'object'){
			
			$(seletor).tabs("option", "enable", tabs);
			
		}

	}
	else{
		
		$(seletor).tabs("enable");
		
	}

};

/**
 * Desabilita os painéis informados da tab. Recebe dois parâmetros, o seletor da div com os painéis que deseja desabilitar. Se não for informado um parâmetro tabs válido, todos os painéis serão desativados.
 * @param seletor - Seletor da div Tab.
 * @param tabs - Painéis que deseja desabilitar.
 * <i><ul>Opções tabs:<ul></i> <br>
 *     <li><b>String: </b></li> O href do painél que será desativado. 
 *     <li><b>Number: </b></li> O índice do painél que será desativado. 
 *     <li><b>Array: </b></li> Um vetor com os índices dos painéis que serão desativados 
 *     
 *     <br><br>
 *     
 * <b><u>Exemplos</u></b><br><br>
 *
 *  <i> 
 *  tab.<b>desabilitarTabs("#formulario #tabs")</b>;<br>
 *  tab.<b>desabilitarTabs("#formulario #tabs", "#tab1")</b>;<br>
 *	tab.<b>desabilitarTabs("#formulario #tabs", 2)</b>;<br>
 *  tab.<b>desabilitarTabs("#formulario #tabs", [0,1])</b>;<br>
 *  </i>  
 *     
 */
Tabs.prototype.desabilitarTabs = function(seletor, tabs){
	
	if(tabs == 0 || tabs){
		
		if(typeof tabs == 'string' || typeof tabs == 'number'){
			
			$(seletor).tabs("disable", tabs);
			
		}
		
		if(typeof tabs == 'object'){
			
			$(seletor).tabs("option", "disabled", tabs);
			
		}

	}
	else{
		
		$(seletor).tabs("disable");
		
	}
    

};

/**
 * Destrói a Tab
 * @param seletor - Seletor da div Tab.
 * <br><br>
 * <b><u>Exemplos</u></b><br><br>
 *
 *<i> 
 *  tab.<b>destruirTabs("#formulario #tabs")</b>;<br>
 *</i>  
 * 
 */
Tabs.prototype.destruirTabs = function(seletor){
	
	$(seletor).tabs("destroy");
	
};

/**
 * Este método cria uma Tab. Recebe dois parâmetros. O parâmetro seletor é obrigatório.
 * @param seletor - Seletor da div Tab.
 * @param config - JSon com as opções para a criação da Tab. <br>
 * <i><ul>Opções config:<ul></i> <br>
 *     <li><b>active</b></li> Default: 0 <br> 
 *     			<u>Boolean:</u> Campos visíveis. Isto exige que o collapsible tenha a opção true; <br>
 *     			<u>Integer:</u>: O índice ficará ativo ao abrir a janela. Um valor negativo seleciona painéis que vão para trás a partir do último painel. 
 * 	   <br><br> 
 * 	   <li><b>collapsible</b></li> Default: false <br> 
 *     			<u>Boolean:</u> Quando definido como true , o painel ativo pode ser fechado. Dependendo da opção do <i>active</i> 
 * 	   <br><br> 
 * 	   <li><b>disabled</b></li> Default: false <br> 
 *     			<u>Boolean:</u> Quando definido como true , todas as guias ficam desativadas <br>
 *     			<u>Array:</u> Um vetor contendo os índices das guias que devem ser desativadas, por exemplo, [ 0, 2 ] iria desativar a primeira e a terceira abas. 
 *     <br><br> 
 * 	   <li><b>event</b></li> Default: click <br> 
 *     			<u>String:</u> O tipo de evento que as abas deve reagir, a fim de ativar o separador. Para ativar em foco, use "mouseover".
 *     <br><br> 
 * 	   <li><b>heightStyle</b></li> - Controla a altura do painel de cada guia. Default: content <br> 
 *     			<u>String - Valores possíveis:</u> <br>
 *     			<i>"auto"</i> - Todos os painéis irão ser definidos com a altura do painel mais alto. <br>
 *     			<i>"fill"</i> - Expande a altura disponível com base na altura dos pais dos guias. <br>
 *     			<i>"content"</i> - Cada painel terá a altura conforme seu conteúdo.
 *     <br><br> 
 * 	   <li><b>show</b></li> - Se e como animar a exibição do painel. Default: null <br> 
 *     			<u>Boolean:</u> Quando definido para false, nenhuma animação será usada e o painel será exibido imediatamente. Quando definido como true, o painel vai aparecer com a duração padrão ea flexibilização padrão.<br>
 *     			<u>Number:</u> O painel vai aparecer com a duração especificada e a flexibilização padrão. <br>
 *     			<u>String:</u> O painel será exibido usando o efeito especificado. O valor pode ser o nome de um embutido jQuery método animação, tal como "slideUp", ou o nome de um efeito jQuery UI, tais como "fold". Em qualquer dos casos, o efeito será usada com o padrão e a duração de flexibilização padrão. <br>
 *     			<u>Object:</u> Se o valor for um objeto, então effect, delay, duration, e easing podem ter propriedades fornecidas. Se o effect propriedade contém o nome de um método jQuery, em seguida, este método vai ser usado; de outro modo, assume-se que seja o nome de um efeito jQuery UI. Ao usar um efeito jQuery UI que suporta configurações adicionais, você pode incluir essas definições no objeto e eles serão passados ​​para o efeito. Se duration ou easing for omitido, em seguida, os valores padrão serão utilizados. Se effect é omitido, então "fadeOut" será usado. Se delay for omitido, então nenhum atraso é usado.
 *     <br><br> 
 * 	   <li><b>hide</b></li> - Se e como animar a ocultação do painel. Default: null <br> 
 *     			<u>Boolean:</u> Quando definido para false, nenhuma animação será usada e o painel ficará oculto imediatamente. Quando definido como true , o painel vai desaparecer com a duração padrão ea flexibilização padrão.<br>
 *     			<u>Number:</u> O painel vai desaparecer com a duração especificada e a flexibilização padrão. <br>
 *     			<u>String:</u> O painel será escondido usando o efeito especificado. O valor pode ser o nome de um embutido jQuery método animação, tal como "slideUp" , ou o nome de um efeito jQuery UI , tais como "fold" . Em qualquer dos casos, o efeito será usada com o padrão e a duração de flexibilização padrão. <br>
 *     			<u>Object:</u> Se o valor for um objeto, então effect, delay, duration, e easing podem ter propriedades fornecidas. Se o effect propriedade contém o nome de um método jQuery, em seguida, este método vai ser usado; de outro modo, assume-se que seja o nome de um efeito jQuery UI. Ao usar um efeito jQuery UI que suporta configurações adicionais, você pode incluir essas definições no objeto e eles serão passados ​​para o efeito. Se duration ou easing for omitido, em seguida, os valores padrão serão utilizados. Se effect é omitido, então "fadeOut" será usado. Se delay for omitido, então nenhum atraso é usado.
 *     <br><br> 
 *     
 *     <b>Exemplo</b><br>
 *     
 * <i>
 *     	var json = {<br>
 *			 active: false,<br>
 *			 collapsible: true,<br>
 *			 hide: { effect: "blind", duration: 500 },<br>
 *			 show: { effect: "blind", duration: 400 }<br>
 *	};<br><br>
 *	
 *	var seletor = "#formulario #tabs";<br><br>
 *	
 *	tabs.<b>gerarTabs(seletor, json)</b>;
 *  </i>   
 *     		
 */
Tabs.prototype.gerarTabs = function(seletor, config){
	
	var aux = {
			active: 0,
			collapsible: false
	};
	 
	if(config){
		
		aux = $.extend(aux, config);
		
	}
			
	$(seletor).tabs(aux);
	
	$(seletor + " .delete").click(function (ui) { 
	    
	    var tab = $(this).parent('li').children('a').attr("href");

	    $(this).parent('li')
	      .unbind('click')
	      .hide('slow', function() {
	              $(this).remove();
	       });
	    
	    $(tab).hide('slow', function() {
	              $(tab).remove();
	    });
	    
	    
	    
	});
	 
};

var tabs = new Tabs();
